<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进度条</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<style type="text/css">
        .father{
            width:500px;height: 20px;background:#ccc;margin:100px auto;border-radius:10px;
        }

        .jindu{
        	font-size:14px;color: #FFC90E;;line-height:20px;text-align: center;font-weight: bold;
        }

	</style>
</head>
<body>

    <div class="father">
   	    <div class="son"></div>
        <div class="jindu">0%</div>
    </div>

    <input type="button" id="btn" value="开始">

    <script type="text/javascript">
        $(function(){
            $(#btn).click(){
            	run();
            }

            function run(){
            	$('.son').animate({left:'0px'},5000);
            	time = setInterval(JinDuTime,200);
            }

            function JinDuTime(){
                left = 500-Math.abs(parseInt($('.son').css('left')));
                jindutiao = Math.round(left/5);   //进度条百分比
                jindutiao += '%';
                $('.jindu').text(jindutiao);
            }

        });




    </script>
	
</body>
</html>